<template>
    <el-container class="layout"
        :style="`max-width:${$store.state.maxWidth};font-size:${$store.state.fontSize};font-family:${$store.state.fontFamily};`">
        <el-header class="layout-header">
            <div class="logo">
                <h3>ST博客管理系统</h3>
            </div>
            <div class="right">
                <div class="top" v-if="isLoggedIn">
                    <div class="user-info-module" @click="openUserInfoDialog">
                        <el-avatar :src="userAvatar" :size="36" class="user-avatar">
                            <i class="el-icon-user-solid"></i>
                        </el-avatar>
                        <span class="username-text">{{ username }}</span>
                    </div>
                    <el-button class="logout-btn" size="mini" @click="logoutFn">退出</el-button>
                </div>
                <div class="top" v-else>
                    <el-button class="login-btn" size="mini" @click="openLoginDialog">登录</el-button>
                </div>
            </div>
        </el-header>

        <el-container class="layout-section">
            <el-aside class="aside" width="220px">
                <el-menu :default-active="activeMenu" :router="false" @select="handleMenuSelect">
                    <el-menu-item index="/home">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">主页</span>
                    </el-menu-item>
                    <el-menu-item index="/banner">
                        <i class="el-icon-picture"></i>
                        <span slot="title">轮播图</span>
                    </el-menu-item>
                    <el-submenu index="nav" v-if="isAdmin">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>导航管理</span>
                        </template>
                        <el-menu-item v-for="(category, index) in categoryGroups" :key="index"
                            :index="getCategoryPath(category.parentCate)" class="category-menu-item"
                            @mouseenter.native="handleCategoryMouseEnter(index)"
                            @mouseleave.native="handleCategoryMouseLeave(index)">
                            <span>{{ category.parentCate }}</span>
                            <i class="el-icon-close delete-icon" v-show="hoveredCategoryIndex === index"
                                @click.stop="handleDeleteCategory(category.parentCate)"></i>
                        </el-menu-item>
                        <div class="add-menu-item" @click.stop="handleAddCategoryClick">
                            <i class="el-icon-plus"></i>
                            <span>添加分类</span>
                        </div>
                    </el-submenu>
                    <el-submenu index="article">
                        <template slot="title">
                            <i class="el-icon-edit"></i>
                            <span>博客管理</span>
                        </template>
                        <el-menu-item index="/publish_article">发布文章</el-menu-item>
                        <el-menu-item index="/article_list">文章列表</el-menu-item>
                        <el-menu-item v-if="isAdmin" index="/comment_manage">评论管理</el-menu-item>
                    </el-submenu>
                    <el-menu-item v-if="isAdmin" index="/user">
                        <i class="el-icon-s-custom"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="/setting">
                        <i class="el-icon-setting"></i>
                        <span slot="title">系统界面设置</span>
                    </el-menu-item>
                    <el-menu-item index="/operation_log">
                        <i class="el-icon-document"></i>
                        <span slot="title">操作日志</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>

            <el-main class="main">
                <nav class="main-nav">
                    <div v-for="item in navList" :key="item.id" class="nav-tab"
                        :class="{ active: $route.path === item.path }" @click="goToTab(item.path)">
                        <span>{{ item.text }}</span>
                        <i class="el-icon-close close-icon" @click.stop="closeTabFn(item.text)"></i>
                    </div>
                </nav>

                <div class="main-content">
                    <div v-if="isWelcome" class="welcome">
                        <h2>ST博客管理系统</h2>
                        <p>{{ welcomeText }}</p>
                        <p>系统版本: V2.5.0</p>
                        <p>更新时间: 2025-11-07</p>
                    </div>
                    <router-view v-else />
                </div>

                <el-dialog title="添加新分类" :visible.sync="addCategoryDialogVisible" width="600px"
                    :close-on-click-modal="false">
                    <el-form :model="categoryForm" :rules="categoryRules" ref="categoryForm" label-width="100px">
                        <el-form-item label="一级导航" prop="parentCate">
                            <el-input v-model="categoryForm.parentCate" placeholder="请输入一级导航名称"></el-input>
                        </el-form-item>
                        <el-form-item label="二级导航" prop="childCates">
                            <div v-for="(item, index) in categoryForm.childCates" :key="index"
                                style="margin-bottom: 10px;">
                                <el-input v-model="item.name" :placeholder="`请输入第${index + 1}个二级导航名称`"
                                    style="width: 85%; margin-right: 10px;">
                                </el-input>
                                <el-button v-if="categoryForm.childCates.length > 1" type="danger" icon="el-icon-delete"
                                    size="small" @click="removeChildCate(index)">
                                </el-button>
                            </div>
                            <el-button v-if="categoryForm.childCates.length < 3" type="primary" icon="el-icon-plus"
                                size="small" @click="addChildCate">
                                添加二级导航
                            </el-button>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="addCategoryDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="submitAddCategory">确认</el-button>
                    </div>
                </el-dialog>
            </el-main>
        </el-container>

        <LoginDialog :visible.sync="loginDialogVisible" @login-success="handleLoginSuccess"
            @close="handleLoginDialogClose" />

        <el-dialog title="用户信息" :visible.sync="userInfoDialogVisible" width="500px" :close-on-click-modal="false"
            :show-close="false" @close="handleUserInfoDialogClose">
            <div class="user-info-content">
                <div class="user-info-item">
                    <label>账号：</label>
                    <span>{{ userInfo.account || '' }}</span>
                </div>
                <div class="user-info-item">
                    <label>头像：</label>
                    <div class="avatar-upload-wrapper">
                        <el-avatar :src="userInfo.imgUrl ? getFullImageUrl(userInfo.imgUrl) : ''" :size="80"
                            class="avatar-display" @click.native="handleAvatarClick">
                            <i class="el-icon-user-solid"></i>
                        </el-avatar>
                        <input type="file" ref="avatarInput" accept="image/*" style="display: none"
                            @change="handleAvatarChange" />
                        <el-button type="primary" size="small" icon="el-icon-upload" @click="triggerAvatarUpload">
                            上传头像
                        </el-button>
                    </div>
                </div>
                <div class="user-info-item">
                    <label>用户名：</label>
                    <div class="username-edit-wrapper">
                        <el-input v-if="isEditingUsername" v-model="editingUsername" size="small" @blur="saveUsername"
                            @keyup.enter.native="saveUsername" ref="usernameInput" style="width: 200px;"></el-input>
                        <span v-else class="editable-text" @click="startEditUsername">
                            {{ userInfo.username || '' }}
                            <i class="el-icon-edit"></i>
                        </span>
                    </div>
                </div>
                <div class="user-info-item">
                    <label>性别：</label>
                    <div class="gender-select-wrapper">
                        <el-select v-model="userInfo.gender" placeholder="请选择性别" size="small" style="width: 200px;"
                            @change="handleGenderChange">
                            <el-option label="男" value="男"></el-option>
                            <el-option label="女" value="女"></el-option>
                            <el-option label="不愿透露" value="不愿透露"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="user-info-item">
                    <label>注册时间：</label>
                    <span>{{ formatDate(userInfo.createAt) }}</span>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleSwitchAccount">切换账号</el-button>
                <el-button type="danger" @click="handleLogoutFromDialog">退出登录</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<script>
import { mapState } from "vuex"
import { Message, MessageBox } from "element-ui"
import { addCateBatch, listCate, removeCateByParentCate, getCurrentUserDetail, editCurrentUser, uploadPhoto } from "./api/index"
import LoginDialog from "./components/LoginDialog.vue"

export default {
    components: {
        LoginDialog
    },
    data() {
        return {
            isWelcome: true,
            username: "",
            userAvatar: "",
            isLoggedIn: false,
            loginDialogVisible: false,
            userInfoDialogVisible: false,
            isSwitchingAccount: false,
            userInfo: {
                account: "",
                username: "",
                gender: "",
                imgUrl: "",
                createAt: ""
            },
            isEditingUsername: false,
            editingUsername: "",
            addCategoryDialogVisible: false,
            categoryList: [],
            categoryForm: {
                parentCate: "",
                childCates: [{ name: "" }]
            },
            categoryRules: {
                parentCate: [
                    { required: true, message: "请输入一级导航名称", trigger: "blur" }
                ],
                childCates: [
                    {
                        validator: (rule, value, callback) => {
                            const validCates = value.filter(item => item.name && item.name.trim())
                            if (validCates.length === 0) {
                                callback(new Error("至少需要填写一个二级导航"))
                            } else if (validCates.length > 3) {
                                callback(new Error("最多只能填写三个二级导航"))
                            } else {
                                callback()
                            }
                        },
                        trigger: "blur"
                    }
                ]
            },
            categoryPathMap: {
                '工作生活': '/work_life',
                '技能学习': '/skill_learn',
                '兴趣爱好': '/my_hobby'
            },
            hoveredCategoryIndex: null
        }
    },
    computed: {
        ...mapState(["navList"]),
        activeMenu() {
            return this.$route.path
        },
        isAdmin() {
            const role = localStorage.getItem("USER_ROLE")
            return role === '1'
        },
        welcomeText() {
            if (!this.isLoggedIn) {
                return '请登录后再进行操作'
            }
            const role = localStorage.getItem("USER_ROLE")
            if (role === '1') {
                return `欢迎您，管理员${this.username}`
            } else {
                return `欢迎您：用户${this.username}`
            }
        },
        categoryGroups() {
            const groups = {}
            this.categoryList.forEach(item => {
                const parentCate = item.cate
                if (!groups[parentCate]) {
                    groups[parentCate] = {
                        parentCate: parentCate,
                        children: []
                    }
                }
                groups[parentCate].children.push(item)
            })
            return Object.values(groups)
        }
    },
    methods: {
        async loadCategories() {
            try {
                const resData = await listCate()
                if (resData && resData.code === 200) {
                    this.categoryList = resData.result || []
                } else {
                    console.error('加载分类列表失败:', resData.msg)
                }
            } catch (error) {
                console.error('加载分类列表失败:', error)
            }
        },
        getCategoryPath(parentCate) {
            const cate = encodeURIComponent(parentCate)
            return `/category?cate=${cate}`
        },
        openLoginDialog() {
            this.loginDialogVisible = true
        },
        handleLoginSuccess() {
            this.updateUserInfo()
            this.loadCategories()
            this.$root.$emit('refresh-home-data')
            if (this.isSwitchingAccount) {
                this.isSwitchingAccount = false
                this.$nextTick(() => {
                    this.openUserInfoDialog()
                })
            }
        },
        handleLoginDialogClose() {
            if (this.isSwitchingAccount) {
                this.isSwitchingAccount = false
                this.$nextTick(() => {
                    this.userInfoDialogVisible = true
                })
            }
        },
        formatDate(dateStr) {
            if (!dateStr) return ''
            const date = new Date(dateStr)
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            return `${year}-${month}-${day}`
        },
        handleSwitchAccount() {
            this.userInfoDialogVisible = false
            this.isSwitchingAccount = true
            this.$nextTick(() => {
                this.loginDialogVisible = true
            })
        },
        async handleLogoutFromDialog() {
            const result = await this.$showConfirm('提示', '您要退出登录吗？', '确定', '取消')
            if (result.isConfirmed) {
                localStorage.removeItem("AUTO_TOKEN")
                localStorage.removeItem("USERNAME")
                localStorage.removeItem("ACCOUNT")
                localStorage.removeItem("USER_ROLE")
                this.username = ""
                this.isLoggedIn = false
                this.userInfoDialogVisible = false
                this.$store.commit("closeTab", [])
                this.$router.push({ path: "/" }).catch(() => { })
            }
        },
        handleMenuSelect(index) {
            if (!this.isLoggedIn) {
                this.loginDialogVisible = true
                return false
            }
            this.$router.push({ path: index }).catch(() => { })
        },
        handleAddCategoryClick() {
            if (!this.isLoggedIn) {
                this.loginDialogVisible = true
                return
            }
            this.openAddCategoryDialog()
        },
        async updateUserInfo() {
            const token = localStorage.getItem("AUTO_TOKEN")
            const username = localStorage.getItem("USERNAME")
            if (token && username) {
                this.username = username
                this.isLoggedIn = true
                await this.loadUserDetail()
            } else {
                this.username = ""
                this.userAvatar = ""
                this.isLoggedIn = false
            }
        },
        async loadUserDetail() {
            try {
                const resData = await getCurrentUserDetail()
                if (resData && resData.code === 200 && resData.data) {
                    const userData = resData.data
                    this.userInfo = {
                        account: userData.account || "",
                        username: userData.username || "",
                        gender: userData.gender || "",
                        imgUrl: userData.imgUrl || "",
                        createAt: userData.createAt || ""
                    }
                    if (userData.imgUrl) {
                        this.userAvatar = this.getFullImageUrl(userData.imgUrl)
                    } else {
                        this.userAvatar = ""
                    }
                    if (userData.username) {
                        this.username = userData.username
                        localStorage.setItem("USERNAME", userData.username)
                    }
                }
            } catch (error) {
                console.error('加载用户信息失败:', error)
            }
        },
        async openUserInfoDialog() {
            if (!this.isLoggedIn) {
                this.loginDialogVisible = true
                return
            }
            await this.loadUserDetail()
            this.userInfoDialogVisible = true
        },
        handleUserInfoDialogClose() {
            this.isEditingUsername = false
            this.editingUsername = ""
        },
        getFullImageUrl(imgUrl) {
            if (!imgUrl) return ""
            if (imgUrl.startsWith('http://') || imgUrl.startsWith('https://')) {
                return imgUrl
            }
            const host = 'http://localhost:3001'
            if (imgUrl.startsWith('/static/')) {
                return `${host}${imgUrl}`
            }
            return `${host}/static/resources/imgs/${imgUrl}`
        },
        handleAvatarClick() {
            this.triggerAvatarUpload()
        },
        triggerAvatarUpload() {
            this.$refs.avatarInput.click()
        },
        async handleAvatarChange(event) {
            const file = event.target.files[0]
            if (!file) return

            if (!/\.(jpe?g|png|gif|bmp|webp)/i.test(file.name)) {
                Message({ type: "error", message: "请选择图片格式的文件" })
                return
            }

            if (file.size > 5 * 1024 * 1024) {
                Message({ type: "error", message: "图片大小不能超过5MB" })
                return
            }

            try {
                const formData = new FormData()
                formData.append('photo', file)

                const uploadRes = await uploadPhoto(formData)
                if (uploadRes && uploadRes.code === 200 && uploadRes.picUrl) {
                    const updateRes = await editCurrentUser({
                        username: this.userInfo.username,
                        gender: this.userInfo.gender,
                        imgUrl: uploadRes.picUrl
                    })

                    if (updateRes && updateRes.msg) {
                        Message({ type: "success", message: "头像上传成功" })
                        this.userInfo.imgUrl = uploadRes.picUrl
                        this.userAvatar = this.getFullImageUrl(uploadRes.picUrl)
                    } else {
                        Message({ type: "error", message: "头像上传失败" })
                    }
                } else {
                    Message({ type: "error", message: uploadRes.msg || "头像上传失败" })
                }
            } catch (error) {
                console.error('上传头像失败:', error)
                Message({ type: "error", message: "头像上传失败，请稍后重试" })
            } finally {
                event.target.value = ''
            }
        },
        startEditUsername() {
            this.isEditingUsername = true
            this.editingUsername = this.userInfo.username
            this.$nextTick(() => {
                if (this.$refs.usernameInput) {
                    this.$refs.usernameInput.focus()
                }
            })
        },
        async saveUsername() {
            if (!this.editingUsername || !this.editingUsername.trim()) {
                Message({ type: "error", message: "用户名不能为空" })
                this.isEditingUsername = false
                return
            }

            const newUsername = this.editingUsername.trim()
            if (newUsername === this.userInfo.username) {
                this.isEditingUsername = false
                return
            }

            try {
                const updateRes = await editCurrentUser({
                    username: newUsername,
                    gender: this.userInfo.gender,
                    imgUrl: this.userInfo.imgUrl
                })

                if (updateRes && updateRes.msg) {
                    Message({ type: "success", message: "用户名修改成功" })
                    this.userInfo.username = newUsername
                    this.username = newUsername
                    localStorage.setItem("USERNAME", newUsername)
                    this.isEditingUsername = false
                } else {
                    Message({ type: "error", message: "用户名修改失败" })
                }
            } catch (error) {
                console.error('修改用户名失败:', error)
                Message({ type: "error", message: "用户名修改失败，请稍后重试" })
            }
        },
        // 处理性别改变
        async handleGenderChange(newGender) {
            try {
                const updateRes = await editCurrentUser({
                    username: this.userInfo.username,
                    gender: newGender,
                    imgUrl: this.userInfo.imgUrl
                })

                if (updateRes && updateRes.msg) {
                    Message({ type: "success", message: "性别修改成功" })
                    this.userInfo.gender = newGender
                } else {
                    Message({ type: "error", message: "性别修改失败" })
                    await this.loadUserDetail()
                }
            } catch (error) {
                console.error('修改性别失败:', error)
                Message({ type: "error", message: "性别修改失败，请稍后重试" })
                await this.loadUserDetail()
            }
        },
        async logoutFn() {
            const result = await this.$showConfirm('提示', '您要退出登录吗？', '确定', '取消')
            if (result.isConfirmed) {
                localStorage.removeItem("AUTO_TOKEN")
                localStorage.removeItem("USERNAME")
                localStorage.removeItem("ACCOUNT")
                localStorage.removeItem("USER_ROLE")
                this.username = ""
                this.isLoggedIn = false
                this.$store.commit("closeTab", [])
                this.$router.push({ path: "/" }).catch(() => { })
            }
        },
        closeTabFn(text) {
            let arr = this.navList.filter(item => item.text != text)
            this.$store.commit("closeTab", arr)
            let len = arr.length
            if (len == 0) {
                setTimeout(() => {
                    this.$router.push({ path: "/" }).catch(() => { })
                }, 0)
                return false
            }
            let path = arr[len - 1].path
            setTimeout(() => {
                this.$router.push({ path: path }).catch(() => { })
            }, 0)
        },
        goToTab(path) {
            this.$router.push({ path: path }).catch(() => { })
        },
        openAddCategoryDialog() {
            this.categoryForm = {
                parentCate: "",
                childCates: [{ name: "" }]
            }
            this.addCategoryDialogVisible = true
            this.$nextTick(() => {
                if (this.$refs.categoryForm) {
                    this.$refs.categoryForm.clearValidate()
                }
            })
        },
        addChildCate() {
            if (this.categoryForm.childCates.length < 3) {
                this.categoryForm.childCates.push({ name: "" })
            }
        },
        removeChildCate(index) {
            if (this.categoryForm.childCates.length > 1) {
                this.categoryForm.childCates.splice(index, 1)
            }
        },
        async submitAddCategory() {
            this.$refs.categoryForm.validate(async (valid) => {
                if (valid) {
                    const validChildCates = this.categoryForm.childCates
                        .filter(item => item.name && item.name.trim())
                        .map(item => item.name.trim())

                    if (validChildCates.length === 0) {
                        Message({ type: "error", message: "至少需要填写一个二级导航" })
                        return
                    }

                    if (validChildCates.length > 3) {
                        Message({ type: "error", message: "最多只能填写三个二级导航" })
                        return
                    }

                    const token = localStorage.getItem("AUTO_TOKEN")
                    if (!token) {
                        Message({ type: "error", message: "您尚未登录，请先登录" })
                        setTimeout(() => {
                            this.$router.push({ path: "/login" }).catch(() => { })
                        }, 1500)
                        return
                    }

                    try {
                        await addCateBatch({
                            parentCate: this.categoryForm.parentCate.trim(),
                            childCates: validChildCates
                        }).then(resData => {
                            if (resData && resData.code == 200) {
                                Message({ type: "success", message: "添加分类成功" })
                                this.addCategoryDialogVisible = false
                                this.loadCategories()
                            } else {
                                Message({ type: "error", message: (resData && resData.msg) || "添加分类失败" })
                            }
                        }).catch(err => {
                            console.error('添加分类失败:', err)
                            let errorMsg = "添加分类失败"
                            if (err.response && err.response.data) {
                                errorMsg = err.response.data.msg || err.response.data.message || errorMsg
                            } else if (err.message) {
                                errorMsg = err.message
                            }
                            if (err.response && err.response.status === 401) {
                                errorMsg = errorMsg || "登录已过期，请重新登录"
                                setTimeout(() => {
                                    this.$router.push({ path: "/login" }).catch(() => { })
                                }, 1500)
                            }
                            Message({ type: "error", message: errorMsg })
                        })
                    } catch (error) {
                        console.error('添加分类失败:', error)
                        Message({ type: "error", message: error.message || "添加分类失败" })
                    }
                } else {
                    return false
                }
            })
        },
        handleCategoryMouseEnter(index) {
            this.hoveredCategoryIndex = index
        },
        handleCategoryMouseLeave() {
            this.hoveredCategoryIndex = null
        },
        handleDeleteCategory(parentCate) {
            MessageBox.confirm(
                `确认删除分类"${parentCate}"吗？删除后将同时删除该分类下的所有二级分类，该分类下的文章将被设置为"暂无分类"。`,
                '提示',
                {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).then(async () => {
                try {
                    const token = localStorage.getItem("AUTO_TOKEN")
                    if (!token) {
                        Message({ type: "error", message: "您尚未登录，请先登录" })
                        setTimeout(() => {
                            this.$router.push({ path: "/login" }).catch(() => { })
                        }, 1500)
                        return
                    }

                    const resData = await removeCateByParentCate({ parentCate })
                    if (resData && resData.code === 200) {
                        Message({ type: "success", message: "删除分类成功" })
                        this.loadCategories()
                        this.hoveredCategoryIndex = null
                    } else {
                        Message({ type: "error", message: (resData && resData.msg) || "删除分类失败" })
                    }
                } catch (error) {
                    console.error('删除分类失败:', error)
                    let errorMsg = "删除分类失败"
                    if (error.response && error.response.data) {
                        errorMsg = error.response.data.msg || error.response.data.message || errorMsg
                    } else if (error.message) {
                        errorMsg = error.message
                    }
                    if (error.response && error.response.status === 401) {
                        errorMsg = errorMsg || "登录已过期，请重新登录"
                        setTimeout(() => {
                            this.$router.push({ path: "/login" }).catch(() => { })
                        }, 1500)
                    }
                    Message({ type: "error", message: errorMsg })
                }
            }).catch(() => {
            })
        }
    },
    watch: {
        $route: {
            immediate: true,
            deep: true,
            handler(newRoute) {
                if (newRoute.path == "/") {
                    this.isWelcome = true
                } else {
                    this.isWelcome = false
                }
            }
        }
    },
    created() {
        this.updateUserInfo()
        this.loadCategories()
    }
}
</script>

<style lang="less">
@theme-color: #a0d8ef;
@theme-color-light: #b3d5f2;
@theme-color-lighter: #d6eaf8;
@bg-color: #f5f7fa;
@text-color-primary: #303133;
@text-color-regular: #606266;
@text-color-secondary: #909399;
@border-color: #dcdfe6;
@border-color-light: #e4e7ed;
@max-width: 100%;
@min-width: 1100px;

.layout {
    width: 100%;
    max-width: @max-width;
    min-width: @min-width;
    margin: 0 auto;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    color: @text-color-primary;

    .welcome {
        text-align: center;
        padding: 200px 20px;

        h2 {
            margin-bottom: 15px;
            color: @text-color-primary;
        }

        p {
            color: @text-color-regular;
            margin-bottom: 10px;
        }
    }
}

.layout-header {
    height: 80px;
    background-color: @theme-color;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .logo {
        color: #fff;
        font-size: 20px;
        font-weight: bold;

        h3 {
            margin: 0;
        }
    }

    .right {
        .top {
            display: flex;
            align-items: center;
            gap: 10px;

            .user-info-module {
                display: flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
                padding: 4px 8px;
                border-radius: 4px;
                transition: background-color 0.3s;

                &:hover {
                    background-color: rgba(255, 255, 255, 0.1);
                }

                .user-avatar {
                    flex-shrink: 0;
                }

                .username-text {
                    color: #fff;
                    font-size: 15px;
                    user-select: none;
                }
            }

            span {
                color: #fff;
                font-size: 15px;
            }

            .logout-btn {
                background-color: rgba(255, 255, 255, 0.2);
                border-color: rgba(255, 255, 255, 0.5);
                color: #fff;

                &:hover {
                    background-color: rgba(255, 255, 255, 0.3);
                    border-color: rgba(255, 255, 255, 0.7);
                    color: #fff;
                }
            }
        }

        .login-btn {
            background-color: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
            color: #fff;

            &:hover {
                background-color: rgba(255, 255, 255, 0.3);
                border-color: rgba(255, 255, 255, 0.7);
                color: #fff;
            }
        }
    }
}

.layout-section {
    display: flex;
    height: calc(100vh - 80px);

    .aside {
        width: 220px;
        background-color: #fff;
        border-right: 1px solid @border-color-light;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);

        .el-menu {
            border-right: none;

            .el-menu-item,
            .el-submenu__title {
                height: 50px;
                line-height: 50px;

                i {
                    margin-right: 8px;
                    font-size: 18px;
                }

                &.is-active {
                    color: @theme-color;
                    background-color: @theme-color-lighter;
                }
            }

            .el-submenu .el-menu-item {
                padding-left: 50px !important;
                position: relative;

                // 添加按钮样式
                .el-button {
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                    padding: 0;
                    border: none;
                    background: transparent;
                    color: inherit;

                    &:hover {
                        color: @theme-color;
                    }
                }

                // 分类菜单项样式
                &.category-menu-item {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-right: 40px !important;

                    .delete-icon {
                        position: absolute;
                        right: 10px;
                        font-size: 16px;
                        cursor: pointer;
                        color: @text-color-secondary;
                        transition: all 0.3s;

                        &:hover {
                            color: #f56c6c;
                            transform: scale(1.2);
                        }
                    }
                }
            }

            // 添加分类按钮样式
            .add-menu-item {
                height: 50px;
                line-height: 50px;
                padding-left: 50px;
                cursor: pointer;
                color: @text-color-primary;
                transition: all 0.3s;
                display: flex;
                align-items: center;

                i {
                    margin-right: 8px;
                    font-size: 18px;
                }

                &:hover {
                    color: @theme-color;
                    background-color: @bg-color;
                }
            }
        }
    }

    .main {
        flex: 1;
        background-color: @bg-color;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0;

        .main-nav {
            background-color: #fff;
            padding: 8px 20px;
            border-bottom: 1px solid @border-color-light;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;

            .nav-tab {
                display: inline-flex;
                align-items: center;
                padding: 8px 20px;
                background-color: #fff;
                border: 1px solid @border-color-light;
                border-radius: 4px;
                cursor: pointer;
                transition: all 0.3s;
                position: relative;

                &:hover {
                    background-color: @bg-color;
                }

                &.active {
                    color: @theme-color;
                    background-color: @theme-color-lighter;
                    border-color: @theme-color-light;
                }

                span {
                    font-size: 14px;
                    margin-right: 8px;
                }

                .close-icon {
                    font-size: 16px;
                    cursor: pointer;
                    transition: color 0.3s;

                    &:hover {
                        color: @theme-color;
                    }
                }
            }
        }

        .main-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
    }
}

.cate-enter,
.article-enter {
    height: 0px;
    opacity: 0;
}

.cate-enter-active,
.article-enter-active {
    transition: all 0.3s ease;
}

.cate-enter-to {
    height: 136px;
    opacity: 1;
}

.article-enter-to {
    height: 88px;
    opacity: 1;
}

.cate-leave-to,
.article-leave-to {
    height: 0px;
    opacity: 0;
}

.cate-leave-active,
.article-leave-active {
    transition: all 0.3s ease;
}

.cate-leave,
.article-leave {
    height: 136px;
    opacity: 1;
}

.user-info-content {
    .user-info-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        label {
            width: 100px;
            color: @text-color-primary;
            font-weight: 500;
            flex-shrink: 0;
        }

        span {
            color: @text-color-regular;
        }

        .avatar-upload-wrapper {
            display: flex;
            align-items: center;
            gap: 15px;

            .avatar-display {
                cursor: pointer;
                border: 2px solid @border-color-light;
                transition: all 0.3s;

                &:hover {
                    border-color: @theme-color;
                    transform: scale(1.05);
                }
            }
        }

        .username-edit-wrapper {
            .editable-text {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                color: @text-color-primary;
                cursor: pointer;
                padding: 4px 8px;
                border-radius: 4px;
                transition: all 0.3s;

                &:hover {
                    background-color: @bg-color;
                    color: @theme-color;

                    i {
                        opacity: 1;
                    }
                }

                i {
                    opacity: 0;
                    transition: opacity 0.3s;
                    font-size: 14px;
                }
            }
        }

        .gender-select-wrapper {
            display: flex;
            align-items: center;
        }
    }
}
</style>
